<template>
	<view class="container">
		<view class="top-wrapper">
			<CustomNavBar class="title">
				<template v-slot:center>
					<text style="color: white">订单详情</text>
				</template>
				<template v-slot:left>
					<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack">
						<uni-icons type="left" size="20" color="#ffffff"></uni-icons>
					</view>
				</template>
			</CustomNavBar>
			<view class="top-bg"></view>
		</view>
		<view class="content">
			<view class="uni-flex-column top">
				<view class="uni-flex adress-container">
					<image :src="`${$ImgBaseUrl}order_select_address.png`" mode="widthFix" class="address-icon" />
					<view class="address-info">
						<text class="address">{{ detailData?.orderAddress?.address || "请选择地址" }}</text>
						<view class="info">
							<text class="name">{{ detailData?.orderAddress?.name || "" }}</text>
							<text class="mobile">{{ detailData?.orderAddress?.phone || "" }}</text>
						</view>
					</view>
					<uni-icons type="right" size="15" color="#333333" @click="toAddress"></uni-icons>
				</view>

				<view class="uni-flex time-content">
					<image :src="`${$ImgBaseUrl}order_select_time.png`" mode="widthFix" />
					<text class="time_label" style="flex: 1">服务时间</text>
					<uni-icons type="right" size="15" color="#333333"></uni-icons>
				</view>
				<view class="uni-flex uni-justify-between time_item"
					v-for="(item, index) in detailData?.orderServices||[]" :key="item.id"
					@click="openTime(item, index)">
					<text class="text1">{{ item.name||'--' }}</text>
					<view>
						<text class="text2">
							{{ item.startTime&&item.endTime?`${item.startTime.slice(0,10)} ${item.startTime.slice(10,16)}  -${item.endTime.slice(10,16)}` : "请选择服务时间" }}
						</text>
						<uni-icons type="right" size="15" color="#333333"></uni-icons>
					</view>
				</view>
			</view>
			<view class="uni-flex-column center">
				<view v-for="i in detailData?.orderServices" :key="i" class="uni-flex item">
					<image :src="i.img" mode="aspectFill" class="img"></image>
					<view class="uni-flex-column info">
						<text class="title">{{ i.name }}</text>
						<text class="des">{{ i.des }}</text>
						<text class="num">x{{ i.count }}</text>
					</view>
					<view class="uni-flex-column uni-justify-between" style="align-items: flex-end">
						<text class="price">¥{{ i.priceAmount * i.count }}</text>
						<uni-number-box v-model="i.count" :min="1" :max="99" @change="change(i)" />
					</view>
				</view>
				<view class="uni-flex uni-justify-between coupons">
					<view style="display: flex;align-items: center;">
						<image :src="`${$ImgBaseUrl}discount-icon.png`" class="discount-icon" />
						<text class="label1">折扣优惠</text>
					</view>
					<text class="label2">此单享{{ detailData?.discountAmount }}折</text>
				</view>
				<view class="uni-flex uni-justify-between coupons">
					<view style="display: flex;align-items: center;">
						<image :src="`${$ImgBaseUrl}red-envelope-icon.png`" class="red-envelope-icon" />
						<text class="label1">减负红包</text>
					</view>
					<text class="label2">-{{ detailData?.redEnvAmount }}</text>
				</view>
				<view class="uni-flex uni-justify-between coupons">
					<view style="display: flex;align-items: center;">
						<image :src="`${$ImgBaseUrl}coupon-icon.png`" class="coupon-icon" />
						<text class="label1">优惠劵</text>
					</view>
					<view class="label2" @click="goCouponList">
						{{ selectedCoupon ? `-¥${selectedCoupon.usedAmount || selectedCoupon.usedAmount}` : '选择优惠券' }}
						<uni-icons type="right" size="15" color="#999999"></uni-icons>
					</view>
				</view>
				<!-- <view class="uni-flex uni-justify-between coupons">
					<view>
						<image :src="`${$ImgBaseUrl}coupon-icon.png`" class="coupon-icon" />
						<text class="label1">优惠劵</text>
					</view>
					<text class="label2">攒无可用代金券</text>
				</view> -->
				<view class="uni-flex uni-justify-between price-box">
					<text class="label1">总计</text>
					<view>
						<text class="label1">已优惠</text>
						<text
							class="label2">{{ selectedCoupon?.usedAmount ? `¥${selectedCoupon.usedAmount}` : '¥0' }}</text>
					</view>
					<text class="label3">¥{{ detailData?.paymentAmount }}</text>
				</view>
			</view>

			<view class="remarks-box">
				<view class="uni-flex uni-justify-between pay">
					<text class="text1">支付方式</text>
					<view class="text2">
						<!-- <text>极速支付</text> -->
						<text class="no-select">微信支付</text>
						<uni-icons class="image" type="right" size="15" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="line"></view>
				<view class="uni-flex uni-justify-between pay" @click="goInvoicing">
					<text class="text1">开具发票</text>
					<view class="text2">
						<text class="no-select">{{ invoicingTitle }}</text>
						<uni-icons class="image" type="right" size="15" color="#999999"></uni-icons>
					</view>
				</view>
			</view>

			<view class="uni-flex uni-justify-between center remarks" @click="remarksDialog">
				<text class="text1">备注</text>
				<view class="text2">
					<text>{{ detailData?.remark || "请输入备注要求" }}</text>
					<uni-icons type="right" size="15" color="#999999"></uni-icons>
				</view>
			</view>

			<!-- 不做 -->
			<!-- <view class="uni-flex-column uni-justify-between center remarks">
				<view class="uni-flex uni-justify-between">
					<view>
						<image :src="`${$ImgBaseUrl}order_protect.png`" mode="widthFix" />
						<text class="text1">号码保护</text>
					</view>
					<view @click="orderCheckChange">
						<text class="text4">隐私保护中</text>
						<image :src="`${$ImgBaseUrl}order_check_${orderCheck}.png`" mode="widthFix" />
					</view>
				</view>
				<text class="text3">为保护您的隐私安全，已对服务人员隐藏您的真实手机号。为保障服务治疗,请您及时接听平台服务电话</text>
			</view> -->
		</view>

		<view class="uni-flex uni-justify-between bottom">
			<view class="uni-flex-column">
				<!-- 如果有优惠券优惠，显示原价（划掉）和现价 -->
				<template v-if="selectedCoupon?.usedAmount > 0">
					<text class="text1">
						<!-- <text
							style="text-decoration: line-through; color: #999; font-size: 24rpx;">¥{{ selectedCoupon.originalPrice }}</text> -->
						<text style="margin-left: 10rpx;">¥{{ selectedCoupon.nowPrice }}</text>
					</text>
				</template>
				<!-- 如果没有优惠券优惠，只显示现价 -->
				<template v-else>
					<text class="text1">¥{{ detailData?.paymentAmount }}</text>
				</template>
				<text class="text2">本单优惠
					{{ selectedCoupon?.usedAmount ? `¥${selectedCoupon.usedAmount}` : '¥0' }}</text>
			</view>
			<text class="pay_btn" @click="toPay">去支付</text>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="remarkPopup" background-color="#fff" :mask-click="false" borderRadius="20rpx">
			<view class="remark-container">
				<view class="top">
					<text class="title">备注</text>
					<uni-icons type="closeempty" size="15" color="#333333" class="close"
						@click="closePopup"></uni-icons>
				</view>
				<uni-easyinput maxlength="300" type="textarea" v-model="remarkContent" placeholder="请输入备注信息" />
				<view class="submit" @click="submitRemark">提交</view>
			</view>
		</uni-popup>
		<wht-datetime-picker ref="basicPicker" mode="datetime" :show-seconds="false" @confirm="handleBasicConfirm" />
		<liu-delivery-time @change="changeTime" ref="chooseTime" title="请选择预约时间"></liu-delivery-time>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		onUnmounted
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import CustomNavBar from "@/components/custom-navbar/index.vue";
	import {
		orderDetail,
		consumerAddress,
		consumerService,
		editOrderCount
	} from "@/api/consumerOrder.js";
	import {
		getValidCouponList,
		calculateDefaultCoupon
	} from '@/api/coupon.js'

	import useOrder from "../useOrder";
	import {
		getCityCode
	} from "@/common/util.js";
	const {
		handlePay
	} = useOrder();

	const numberValue = ref(1);
	const remarkPopup = ref();
	const basicPicker = ref();
	const chooseTime = ref();
	const remarkContent = ref("");
	const usedCategory = ref('')
	const selectedCoupon = ref(); // 存储选中的优惠券
	const couponid = ref('')
	const goBack = () => {
		// 1. 获取上一页的事件通道（仅navigateTo打开的页面可用）
		const eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel();

		// 2. 触发上一页的“refresh”事件
		eventChannel.emit("refresh");
		// 3. 返回上一页
		uni.navigateBack({
			delta: 1
		});
	};

	const addressItem = ref({});
	// 表单数据
	const valiFormData = reactive({
		// name: "",
		// content: "",
		// date: [],
		// peopleNumber: "",
		// price: "",
		address: "",
		contacts: "",
		phone: "",
		addressId: ""
	});

	const toAddress = () => {
		// console.log("12321");
		uni.navigateTo({
			url: "/pages/tabBars/serviceAddress/serviceAddress",
			events: {
				// 定义接收事件,添加地址成功刷新页面
				acceptDataAddress: (data) => {
					console.log(data);
					addressItem.value = data;

					detailData.value.orderAddress.name = data.contacts;
					detailData.value.orderAddress.phone = data.phone;
					detailData.value.orderAddress.address = data.provinceLive + data.cityLive + data
						.areaLive + data.address + data.doorNumber;
					setAddressFn(data);
				}
			}
		});
	};
	// 监听优惠券选择事件
	const couponSelectedListener = (data) => {
		couponId.value = data.couponId;
		couponAmount.value = data.couponAmount;
		detailData.value.couponAmount = data.couponAmount;
		// 重新计算总价
		calculateTotal();
	};
	// 点击优惠券跳转到卡券列表页面
	const goCouponList = () => {
		// 1. 计算商品总价（i.priceAmount * i.count 的总和）
		let totalPrice = 0;
		if (detailData.value?.orderServices && detailData.value.orderServices.length > 0) {
			detailData.value.orderServices.forEach((item) => {
				totalPrice += item.priceAmount * item.count; // 累加每个商品的总价
			});
		}
		// console.log("商品总价：", totalPrice); // 调试用

		// 2. 跳转时携带总价参数（totalPrice）
		uni.navigateTo({
			url: `/pages/order/consumerOrder/couponList?itemId=${usedCategory.value}&totalPrice=${totalPrice}`,
			events: {
				selectCoupon: (coupon) => {
					selectedCoupon.value = coupon;
					calculateTotalAmount();
				}
			}
		});
	};
	// 计算总金额的方法
	const calculateTotalAmount = () => {
		// 1. 先计算商品原始总价（不包含任何优惠）
		let originalTotal = 0;
		if (detailData.value?.orderServices && detailData.value.orderServices.length > 0) {
			originalTotal = detailData.value.orderServices.reduce((sum, item) => {
				return sum + (item.priceAmount * item.count);
			}, 0);
		}

		// 2. 应用折扣优惠（如果有）
		let discountedTotal = originalTotal;
		if (detailData.value?.discountAmount) {
			discountedTotal *= detailData.value.discountAmount / 10;
		}

		// 3. 应用红包优惠（如果有）
		if (detailData.value?.redEnvAmount) {
			discountedTotal -= Number(detailData.value.redEnvAmount);
		}

		// 4. 应用优惠券优惠（如果有）
		let finalTotal = discountedTotal;
		let couponDiscount = 0;
		if (selectedCoupon.value) {
			couponDiscount = Number(selectedCoupon.value.usedAmount) || 0;
			finalTotal = Math.max(0, discountedTotal - couponDiscount);
		}

		// 5. 保留2位小数
		finalTotal = Number(finalTotal.toFixed(2));

		// 6. 更新数据
		detailData.value.paymentAmount = finalTotal;
		detailData.value.originalAmount = originalTotal.toFixed(2); // 保存原始价格

		// 7. 更新selectedCoupon的显示价格（无论是否有优惠券都设置）
		if (!selectedCoupon.value) {
			selectedCoupon.value = {
				nowPrice: finalTotal,
				usedAmount: 0,
				originalPrice: originalTotal.toFixed(2) // 保存原始价格用于显示
			};
		} else {
			selectedCoupon.value.nowPrice = finalTotal;
			selectedCoupon.value.usedAmount = couponDiscount;
			selectedCoupon.value.originalPrice = originalTotal.toFixed(2);
		}

		return finalTotal;
	};

	const setAddressFn = (data) => {
		const params = {
			orderId: orderId.value,
			addressId: data.id
		};
		consumerAddress(params)
			.then((response) => {
				console.log(response, "response");
				if (response?.code === 200) {
					uni.showToast({
						title: "已选择",
						icon: "success"
					});
				}
			})
			.catch((err) => {
				uni.showToast({
					title: "失败",
					icon: "error"
				});
			});
	};

	const submitRemark = () => {
		detailData.value.remark = remarkContent.value;
		closePopup();
	};

	const closePopup = () => {
		// console.log("123");
		remarkPopup.value.close();
	};

	// 弹出备注框
	const remarksDialog = () => {
		remarkPopup.value.open("bottom");
	};

	// 修改订单数量
	const editOrderCountApi = (async (params) => {
		const res = await editOrderCount(params)
		// console.log('res', res);
	})
	const change = (i) => {
		// console.log('i', i);
		const params = {
			id: i.id,
			count: i.count
		}
		editOrderCountApi(params)

		calculateTotalAmount();

	};
	// 选择时间
	const serviceId = ref("");
	const serviceIndex = ref("1");
	const openTime = (item, index) => {
		serviceId.value = item.id;
		serviceIndex.value = index;
		nextTick(() => {
			// basicPicker.value.show("datetime");
			chooseTime.value.open();
		});
	};

	const changeTime = (data) => {
		console.log(data);
		setServiceFn(data);
	};

	const setServiceFn = (data) => {
		// 1. 拼接完整的“日期+时间”格式（如 "2024-09-01 09:00"）
		const fullStartTime = `${data.day} ${data.startHour}`;
		const fullEndTime = `${data.day} ${data.endHour}`;

		const params = {
			orderId: orderId.value,
			id: serviceId.value,
			startTime: fullStartTime, // 传完整格式到接口
			endTime: fullEndTime // 传完整格式到接口
		};

		consumerService(params)
			.then((response) => {
				if (response?.code === 200) {
					const obj = detailData.value.orderServices[serviceIndex.value];
					// 2. 关键修复：给item赋值完整的时间格式
					obj.startTime = fullStartTime; // 不再是 data.startHour！
					obj.endTime = fullEndTime; // 不再是 data.endHour！
					uni.showToast({
						title: "成功",
						icon: "success"
					});
				}
			})
			.catch((err) => {
				uni.showToast({
					title: "失败",
					icon: "error"
				});
			});
	};

	const handleBasicConfirm = ({
		value,
		formatted
	}) => {
		console.log(value, formatted);
	};

	const invoicingTitle = ref("未选择");
	// 跳转到开具发票页面
	const goInvoicing = () => {
		uni.navigateTo({
			url: "/pages/order/consumerOrder/invoicing?id=" + detailData.value.id,
			events: {
				// 定义接收事件,添加地址成功刷新页面
				acceptDataInvoicing: (data) => {
					console.log(data);
					invoicingTitle.value = data.name;
					// addressItem.value = data;
					// valiFormData.contacts = data.contacts;
					// valiFormData.phone = data.phone;
					// valiFormData.address = data.provinceLive + data.cityLive + data.areaLive + data.address + data.doorNumber;
					// valiFormData.addressId = data.id;
				}
			}
		});
	};

	const orderCheck = ref(true);
	const orderCheckChange = () => {
		orderCheck.value = !orderCheck.value;
	};

	const orderId = ref("");
	const detailData = ref(null);
	const getOrderDetail = () => {
		console.log(orderId, orderId.value);
		orderDetail(orderId.value).then((response) => {
			if (response.code == 200) {
				detailData.value = response.data;
				// Object.assign(detailData.value, response.data);
				// console.log(detailData.value, "detailData.value");
				// 关键：加载订单详情后，立即计算价格（未选券时会自动使用 totalAmount）
				calculateTotalAmount();
				// 关键：订单详情加载完成后，调用默认优惠券接口（此时商品数据已存在，可计算总价）
				if (couponid.value && couponid.value.trim()) {
					nextTick(() => {
						calculateDefaultCouponApi();
					});
				} else {
					selectedCoupon.value = null; // 确保页面显示“选择优惠券”
				}
			}

		});
	};

	const toPay = () => {
		// 1. 从商品列表中提取 id 和 count，组装 serverCount 数组
		const serverCount = detailData.value?.orderServices?.map(item => ({
			id: item.id, // 商品ID（确保数据源中商品ID的键是 "id"，若为其他键需同步修改，如 item.serviceId）
			count: item.count // 商品数量，转为字符串（按接口要求的 "count" 字段类型）
		})) || []; // 若商品列表为空，默认传空数组
		const paymentData = {
			...detailData.value,
			couponId: selectedCoupon.value?.id || '',
			serverCount: serverCount // 新增：将商品ID和数量数组传给后台
			// couponAmount: couponAmount.value
		};
		handlePay(paymentData)
			.then((res) => {
				uni.redirectTo({
					url: "/pages/order/consumerOrder/orderList"
				});
			})
			.catch((err) => {
				uni.showToast({
					title: res.err || "支付失败",
					icon: "error"
				});
			});
	};

	const calculateDefaultCouponApi = async () => {
		// 1. 计算商品总价（原有逻辑不变）
		let totalPrice = 0;
		if (detailData.value?.orderServices && detailData.value.orderServices.length > 0) {
			detailData.value.orderServices.forEach((item) => {
				totalPrice += item.priceAmount * item.count; // 累加商品总价
			});
		}
		const formatTotalPrice = totalPrice.toFixed(0); // 按接口要求格式化价格（整数/小数）

		try {
			// 2. 调用默认优惠券接口
			const res = await calculateDefaultCoupon({
				couponId: couponid.value || null, // 若couponId为空，传null避免接口报错
				price: Number(formatTotalPrice) // 转为数字类型（避免接口解析字符串异常）
			});

			// 3. 校验接口响应（确保code正确且有数据）
			if (res?.code === 200 && res.data) {
				selectedCoupon.value = {
					id: res.data.id || '',
					usedAmount: res.data.usedAmount || 0,
					nowPrice: res.data.nowPrice || 0
				};

				calculateTotalAmount();

				// 可选：打印日志，确认数据赋值成功
				// console.log("默认优惠券赋值成功：", selectedCoupon.value);

			} else {
				// 接口返回成功但无优惠券（如“无可用默认优惠券”）
				selectedCoupon.value = null; // 清空优惠券，页面显示“选择优惠券”
				calculateTotalAmount();
				console.log("无可用默认优惠券：", res?.message || "未返回优惠券数据");
			}

		} catch (err) {
			// 捕获接口请求错误（如网络错误、服务器报错）
			selectedCoupon.value = null; // 清空优惠券
			console.error("获取默认优惠券失败：", err.response || err.message);
			// 可选：仅在需要时提示用户，避免干扰体验
			// uni.showToast({ title: "获取默认优惠券失败", icon: "error" });
		}
	};
	onMounted(() => {
		getOrderDetail();
		// 监听全局优惠券选择事件
		uni.$on('selectCoupon', (coupon) => {
			selectedCoupon.value = coupon;
			console.log('coupon', coupon);
			calculateTotalAmount();
		});
	});
	onUnmounted(() => {
		uni.$off('selectCoupon');
	});

	onLoad((options) => {
		console.log('options', options);
		const {
			id,
			couponId
		} = options;
		orderId.value = id;
		couponid.value = couponId
		// console.log('couponid.value', couponid.value);

		if (options.itemIds) {
			usedCategory.value = options.itemIds.split(',')
			console.log(options, "options");
		}
	});
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
		box-sizing: border-box;
		height: 100vh;

		.top-wrapper {
			position: relative;

			.title {
				position: relative;
				/* 建立新的堆叠上下文 */
				z-index: 1;
			}

			.top-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 300rpx;
				/* 蓝色背景高度 */
				background-color: #1890ff;
				z-index: 0;
				/* 确保在内容下方 */
			}
		}

		.content {
			flex: 1;
			overflow-y: auto; // 允许滚动
			z-index: 1;
			padding-bottom: 20rpx;

			.top {
				background: #ffffff;
				border-radius: 20px;
				padding: 30rpx 24rpx;
				position: relative;
				/* 建立新的堆叠上下文 */
				z-index: 1;
				/* 确保内容在背景上方 */
				margin: 24rpx;

				.adress-container {
					border-bottom: 1rpx solid #e2e2e2;

					.address-info {
						flex: 1;
						margin-left: 19rpx;
						margin-right: 35rpx;
					}

					.address-icon {
						width: 32rpx;
						height: 32rpx;
						margin-top: 10rpx;
					}

					.address {
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
					}

					.info {
						margin-top: 16rpx;
						padding-bottom: 30rpx;

						.name {
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
						}

						.mobile {
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
						}
					}
				}

				.time-content {
					margin-top: 27rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 30rpx;
					}

					.time_label {
						font-size: 34rpx;
						color: #333333;
					}
				}

				.time_item {
					margin-top: 23rpx;
					padding-bottom: 20rpx;
					margin-left: 55rpx;

					// 除了最后一个元素，其他都加下边框
					&:not(:last-child) {
						border-bottom: 1rpx solid #e2e2e2;
					}

					.text1 {
						font-size: 30rpx;
						color: #333333;
					}

					.text2 {
						font-size: 30rpx;
						color: #999999;
					}
				}
			}

			.center {
				background: #ffffff;
				border-radius: 20px;
				padding: 30rpx 24rpx;
				margin: 0 24rpx;

				.item {
					margin-bottom: 32rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.img {
						width: 137rpx;
						height: 137rpx;
						margin-left: 8rpx;
						border-radius: 10rpx;
					}

					.info {
						flex: 1;
						margin-left: 24rpx;

						.title {
							font-weight: 500;
							font-size: 34rpx;
							color: #333333;
						}

						.des {
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							margin-top: 5rpx;
						}

						.num {
							font-size: 28rpx;
							color: #666666;
							margin-top: 12rpx;
						}
					}

					.price {
						font-weight: 500;
						font-size: 30rpx;
						color: #ff6a47;
					}

					.old_price {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;
						margin-top: 10rpx;
					}
				}

				.coupons {
					margin-top: 24rpx;

					.label {
						font-size: 28rpx;
						color: #333333;
					}

					.label2 {
						font-size: 28rpx;
						color: #ff6a47;
					}

					.discount-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}

					.red-envelope-icon {
						width: 28rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}

					.coupon-icon {
						width: 32rpx;
						height: 28rpx;
						margin-right: 20rpx;
					}
				}

				.price-box {
					padding-top: 30rpx;
					margin-top: 34rpx;
					border-top: 1rpx solid #f5f5f5;

					.label1 {
						font-size: 24rpx;
						color: #333333;
					}

					.label2 {
						font-size: 24rpx;
						color: #ff6a47;
						margin-left: 8rpx;
					}

					.label3 {
						font-weight: 500;
						font-size: 32rpx;
						color: #ff6a47;
					}
				}
			}

			.remarks {
				margin-top: 24rpx;

				.text1 {
					font-size: 30rpx;
					color: #333333;
					margin-left: 14rpx;
				}

				.text4 {
					font-size: 30rpx;
					color: #333333;
					margin-right: 14rpx;
				}

				.text2 {
					font-size: 30rpx;
					color: #999999;
				}

				.text3 {
					color: #999999;
					font-size: 24rpx;
					margin-top: 17rpx;
				}

				image {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}

		.bottom {
			background: white;
			height: 100rpx;
			padding: 15rpx 51rpx 23rpx;

			.text1 {
				font-size: 34rpx;
				color: #ff6a47;
			}

			.text2 {
				font-size: 24rpx;
				color: #ff6a47;
				margin-top: 7rpx;
			}

			.pay_btn {
				width: 300rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #2f80ed;
				border-radius: 49px;
				color: white;
			}
		}

		.remark-container {
			padding: 28rpx 25rpx;

			.top {
				margin-bottom: 37rpx;
				display: flex; // 启用 Flex 布局
				align-items: center; // 垂直居中
				justify-content: space-between; // 左右两端对齐

				.title {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					text-align: center;
					flex: 1; // 占据剩余空间，使文字居中
					text-align: center; // 文字水平居中
				}

				.close {
					float: right;
				}
			}

			.submit {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: #2f80ed;
				border-radius: 44px;
				text-align: center;
				color: white;
				font-size: 30rpx;
				margin-top: 84rpx;
			}
		}
	}

	.remarks-box {
		background: #ffffff;
		border-radius: 20px;
		// padding: 30rpx 24rpx;
		padding: 0 24rpx;
		margin: 0 24rpx;
		margin-top: 24rpx;
		// height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.line {
			width: 100%;
			border: 1rpx solid #e2e2e2;
		}

		.text2 {
			.no-select {
				font-weight: 400;
				font-size: 30rpx;
				color: #999;
			}
		}

		.pay {
			padding: 36rpx 0 34rpx;
			align-items: center;

			.text1 {
				flex: 0 0 150rpx;
			}

			.text2 {
				flex: 1;
				display: flex;
				align-items: center;

				.no-select {
					flex: 1;
					text-align: right;
				}

				.image {
					flex: 0 0 40rpx;
				}
			}
		}
	}
</style>
<style lang="scss">
	.uni-easyinput__content-textarea {
		background: #f6f6f6;
		margin: 0 !important;
		padding: 20rpx;
	}
</style>